<template>
  <div class="app-container">
    <div style="padding:10px">
      <el-form :inline="true" class="search-form" label-width="80px">
        <el-row style="display: flex">
          <div style="flex: 1">
            <!-- <el-form-item label="标题" style="margin: 5px 0">
              <el-input
                class="input-with-select"
                v-model="searchForm.title"
                clearable
                placeholder="请输入标题"
              />
            </el-form-item> -->

            <el-form-item class="search-form-item" label="协议类型" style="margin: 5px 0">
              <el-select clearable v-model="searchForm.dictionary_value_id" placeholder="请选择协议类型">
                <el-option v-for="item in dicDataList" :key="item.id" :label="item.tag_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="协议类目" style="margin: 5px 0">
              <el-cascader
                v-model="searchForm.cate_id"
                :options="categoryList"
                :props="{
                  checkStrictly: true,
                  value: 'id',
                  label: 'name',
                  children: 'children',
                }"
                clearable
              />
            </el-form-item>

            <el-form-item label="状态" style="margin: 5px 0">
              <!-- 状态(1.开启,2.关闭) -->
              <el-select
                class="input-with-select"
                v-model="searchForm.status"
                style="width: 100%"
                placeholder="状态"
                clearable
              >
                <!-- 1顶置 2不顶置 -->
                <el-option label="开启" value="1" />
                <el-option label="关闭" value="2" />
              </el-select>
            </el-form-item>
          </div>
          <div style="margin: 5px 0">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="doSearch"
                >搜索</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="doCancelSearch"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="marginTop">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-button
            type="primary"
            size="small"
            @click="drawerShow = true"
            icon="el-icon-circle-plus-outline"
            >添加新协议</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col class="marginTop">
          <el-table
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            v-loading="isLoading"
            :data="afficheList"
          >
            <el-table-column fixed="left" label="ID" prop="id" align="center" />
            <el-table-column label="协议类型" prop="dictionary_value_id_name" align="center" />
            <el-table-column label="版本号" prop="version" align="center" />
            <el-table-column label="分类" prop="version" align="center" width='280'>
              <template slot-scope="scope">
                <!-- 判断一下是不是为空在展示 -->
                <span>
                {{ scope.row.cate1_name }}
                {{ scope.row.cate2_name ? '/' + scope.row.cate2_name : '' }}
                {{ scope.row.cate3_name ? '/' + scope.row.cate3_name : '' }}
              </span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.status == 1">展示</div>
                <div v-else>隐藏</div>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="created_at"
              align="center"
            />

            <el-table-column
              fixed="right"
              width="180"
              prop="address"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="goUpdateAffiche(scope.row.id)"
                >
                  编辑
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  type="text"
                  size="mini"
                  @click="doDeleteAffice(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col style="margin-top: 20px; text-align: right">
          <el-pagination
            :current-page.sync="paginationObj.start"
            :page-sizes="paginationObj.pageSizes"
            :page-size="paginationObj.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paginationObj.total"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-col>
      </el-row>
    </div>

    <!-- 公告弹窗 -->
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="afficheForm.id ? '修改新协议' : '添加新协议'"
      size="70%"
      :withHeader="false"
      :visible.sync="drawerShow"
      :show-close="false"
    >
      <div style="position: relative;margin-bottom: 30px;">
        <div class="drawerTitle">
          <span>{{afficheForm.id ? '修改新协议' : '添加新协议'}}</span>
          <div class="close" @click="doCancelAddOrUpdateAffice">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>

      <div>
        <el-scrollbar
          wrap-style="overflow-x:hidden;"
          style="height: calc(100vh - 185px)"
        >
          <el-form
            ref="afficheFormRef"
            :model="afficheForm"
            :rules="afficheFormRules"
            label-width="120px"
            :inline="false"
            size="mini"
          >
            <el-row>
              <el-col :span="11">
                <el-form-item label="协议版本" prop="version">
                  <el-input v-model="afficheForm.version" placeholder="请输入协议版本" />
                </el-form-item>
              </el-col>

              <el-col :span="11">
                <el-form-item
                  class="width100"
                  label="协议类型："
                  prop="protocoltype"
                >
                  <el-select
                    class="width90"
                    @change="protocoltypeChanges"
                    v-model="afficheForm.dictionary_value_id_name"
                    placeholder="请选择协议类型"
                  >
                    <el-option
                      v-for="item in dicDataList"
                      :key="item.tag_value"
                      :label="item.tag_name"
                      :value="item.tag_value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="展示状态" prop="status">
                  <!--状态(1.开启,2.关闭) -->
                  <el-select
                    v-model="afficheForm.status"
                    placeholder="请选择"
                    clearable>
                    <el-option label="开启" :value="1" />
                    <el-option label="关闭" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="协议类目" prop="category_id1">
                  <el-cascader
                    v-model="cate_id"
                    :options="categoryList"
                    :props="{
                      checkStrictly: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                    }"
                    clearable
                    @change="cate_idWay"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="协议内容" prop="content">
                  <div>
                    <editor-text
                      v-model="afficheForm.content"
                      :height="360"
                    />
                    <!-- <tinymce-editor v-model="afficheForm.content" :height="360" @input="contentcallback" /> -->
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
        <el-col :span="24" style="text-align: right;padding-right:30px">
          <el-button @click="doCancelAddOrUpdateAffice">取消</el-button>
          <el-button
            :loading="submitLoadings"
            type="primary"
            @click="doSaveAffice()"
          >保存</el-button
          >
        </el-col>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getAgreementNewList, SaveAgreementNew, delAgreementNew,getDicAllList,getCateLists,getAgreementNewInfo } from "@/api/activity/agreementnew";
import mix from "@/mixins/index";
import TinymceEditor from '@/components/Tinymce'
export default {
  name: "AfficheList",
  components: {TinymceEditor},
  mixins: [mix],
  data() {
    return {
      isLoading: false, // 公告列表是否正在加载
      searchForm: {
        cate_id: "",
      },
      afficheList: [], // 公告列表
      save_id:0,
      afficheForm: {
        id:"",
        cate1_id:0,
        cate2_id:0,
        cate3_id:0,
        dictionary_id:0,
        dictionary_value_id:0,
        version:'',
        content:'',
        status:1,
        dictionary_value_id_name:''
      },
      cate_id:"",
      afficheFormRules: {
        status: [
          { required: true, message: "请选择展示状态！", trigger: "blur" },
        ],


        // content: [{ required: true, message: "内容必填！", trigger: "blur" }],
      },
      addressList: [], // 省市区
      props: {
        label: "name",
        value: "id",
      },

      groupingList:[], //用户分组列表
      dicDataList:[], //字典协议分类
      protocoltype: "",
      dicChoose: [],
      categoryList:[],

      drawerShow:false, //弹窗展示
      submitLoadings:false, //提交状态


    };
  },
  created() {
    this.getDicList();
    this.getAfficheListData();
    this.getCategoryList();
  },
  methods: {
    contentcallback(e) {
      console.log(e)
      this.afficheForm.content = e;
    },

    async getAgreementInfo(id){
      const  agreementNewInfo = await getAgreementNewInfo({"id":id})
      const { code, data, msg } = agreementNewInfo;
      if (code == 200) {
        this.afficheForm = data;
        this.cate_id = [this.afficheForm.cate1_id, this.afficheForm.cate2_id, this.afficheForm.cate3_id].filter(id => id && id !== 0);

        console.log(this.afficheForm,'----------' )
        this.afficheForm.content = this.afficheForm.content
      } else {
        this.$message.error(msg);
      }
    },
    //获取协议类目
    async getCategoryList(){
      const categoryLists = await getCateLists();
      const { code, data, msg } = categoryLists;
      if (code === 200) {
        this.categoryList = data;
        console.log( this.categoryList,'==========')
      } else {
        this.$message.error(msg);
      }
    },
    // 选择协议类目调用
    cate_idWay(vla) {
      console.log("vla",vla)
      console.log("vla111",vla.length == 3)
      if(vla.length == 1){
        this.afficheForm.cate1_id = vla[0];
        this.afficheForm.cate2_id = 0;
        this.afficheForm.cate3_id = 0;
      }else if(vla.length == 2){
        this.afficheForm.cate1_id = vla[0];
        this.afficheForm.cate2_id = vla[1];
        this.afficheForm.cate3_id = 0;
      }else if(vla.length == 3){
        this.afficheForm.cate1_id = vla[0];
        this.afficheForm.cate2_id = vla[1];
        this.afficheForm.cate3_id = vla[2];
      }else{
        this.afficheForm.cate1_id = 0;
        this.afficheForm.cate2_id = 0;
        this.afficheForm.cate3_id = 0;
      }

      console.log(this.afficheForm);
    },

    async getDicList(){
      const dicList = await getDicAllList({ type: "sys_agreement_type", status: 1 });
      const { code, data, msg } = dicList;
      if (code === 200) {
        this.dicDataList = data;
      } else {
        this.$message.error(msg);
      }
    },
    // 选择协议类型
    protocoltypeChanges(val) {
      if (val !== "") {
        this.dicDataList.forEach((item) => {
          if (val == item.tag_value) {
            this.afficheForm.dictionary_value_id = item.id;
            this.afficheForm.dictionary_id = item.dictionary_id;
          }
        });
      } else {
        this.afficheForm.dictionary_value_id = "";
        this.afficheForm.dictionary_id = "";
      }
      console.log("asdasd",this.prototype)
    },

    // 选择协议分类
    agreementCateChanges(val) {
      if (val !== "") {
        this.dicDataList.forEach((item) => {
          if (val == item.tag_value) {
            this.searchForm.dictionary_value_id = item.id;
            this.searchForm.dictionary_id = item.dictionary_id;
          }
        });
      } else {
        this.dicChoose.dictionary_value_id = "";
        this.dicChoose.dictionary_id = "";
      }

      console.log(this.dicChoose)
    },

    //获取列表
    async getAfficheListData() {
      this.isLoading = true;
      this.searchForm.page = this.paginationObj.start;
      this.searchForm.count = this.paginationObj.limit;
      const res = await getAgreementNewList(this.searchForm);
      const { code, data, msg } = res;
      if (code === 200) {
        this.afficheList = data.list;
        this.paginationObj.total = data.total;
      } else {
        this.$message.error(msg);
      }
      this.isLoading = false;
    },

    resetPaginationObj() {
      this.paginationObj.start = 1;
      this.paginationObj.limit = 10;
    },
    // 查询公告列表
    doSearch() {
      this.paginationObj.start = 1;
      this.getAfficheListData();
    },
    // 取消搜索
    doCancelSearch() {
      this.searchForm = this.$options.data().searchForm;
      this.paginationObj.start = 1;
      this.getAfficheListData();
    },
    sizeChange(val) {
      this.paginationObj.start = 1;
      this.paginationObj.limit = val;
      this.getAfficheListData();
    },
    currentChange(val) {
      this.paginationObj.start = val;
      this.getAfficheListData();
    },

    // 去修改新协议
    goUpdateAffiche(id) {
      console.log("id1111",id)
      this.getAgreementInfo(id)
      this.drawerShow = true;

      /* this.goodsInfoWay(row);
      const item = this.afficheList.find((item) => item.id === id);
      if (item) {
        this.afficheForm = item;
      } */
    },
    // 删除公告
    doDeleteAffice(id) {
      this.$confirm("此操作将删除该协议, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delAgreementNew({ id });
          const { code, msg } = res;
          if (code === 200) {
            this.$message.success("删除成功！");
            // 更新列表
            this.getAfficheListData();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 取消新增或更新公告
    doCancelAddOrUpdateAffice() {
      this.drawerShow = false;
      this.contentcallback("");
      this.cate_id = ''
      this.afficheForm = {
        id:"",
        cate1_id:0,
        cate2_id:0,
        cate3_id:0,
        dictionary_id:0,
        dictionary_value_id:0,
        version:'',
        content:' ',
        status:1,
        dictionary_value_id_name:''
      },
      this.afficheForm.content = ' '
      console.log(this.afficheForm.content)
      // this.afficheForm = this.$options.data().afficheForm;

    },

    //表单提交
    doSaveAffice() {
      this.$refs.afficheFormRef.validate(async (valid) => {
        if (valid) {
          this.submitLoadings = true;
          console.log("this.afficheForm", this.afficheForm);
          // 添加或者更新公告
          const res = await SaveAgreementNew({
            id:this.afficheForm.id,
            cate1_id:this.afficheForm.cate1_id,
            cate2_id:this.afficheForm.cate2_id,
            cate3_id:this.afficheForm.cate3_id,
            dictionary_id:this.afficheForm.dictionary_id,
            dictionary_value_id:this.afficheForm.dictionary_value_id,
            version:this.afficheForm.version,
            content:this.afficheForm.content,
            status:this.afficheForm.status,

          });
          const { code, msg } = res;
          if (code === 200) {
            const str = this.afficheForm.id ? "修改成功!" : "添加成功!";
            this.$message.success(str);
            // 关闭对话框并更新数据
            this.drawerShow = false;
            this.afficheForm = this.$options.data().afficheForm;
            this.cate_id = ''
            this.afficheForm.content = ' '
            this.getAfficheListData();
            this.submitLoadings = false;
          } else {
            this.$message.error(msg);
            this.submitLoadings = false;
          }
        } else {
          this.$message.warning("请检查：有部分信息尚未添加完整！");
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.margin-10 {
  margin: 10px;
}
</style>
